<template>
<!-- 组织架构 -->
   <div class="dashboard-container">
      <div class="app-container">
         <!-- 头部 -->
         <!-- 卡片 + layout行列布局 -->
         <el-card class="tree-card">
            <!-- 头部 -->
            <!-- 左侧 -->
            <TreeTools
               :treeNode="company"
               :isRoot="true"
               @addDepts="addDepts"
            ></TreeTools>
            <el-tree
               :data="departs"
               :default-expand-all="true"
               :props="defaultProps"
            >
               <TreeTools
                  slot-scope="{ data }"
                  :treeNode="data"
                  @delDepts="getPanes"
                  @addDepts="addDepts"
                  @editDepts="editDepts"
               ></TreeTools>
               <!-- <el-row
                  type="flex"
                  justify="space-between"
                  style="height: 40px; width: 100%"
                  align="middle"
                  slot-scope="{ data }"
               >
                  <el-col>
                     <span>{{ data.name }}</span>
                  </el-col>
                  <el-col :span="4">
                     <el-row type="flex" justify="end">
                        <el-col>{{ data.manager }}</el-col>
                        <el-col>
                           <el-dropdown>
                              <span class="el-dropdown-link">
                                 操作
                                 <i
                                    class="el-icon-arrow-down el-icon--right"
                                 ></i>
                              </span>
                              <el-dropdown-menu slot="dropdown">
                                 <el-dropdown-item>
                                    添加子部门
                                 </el-dropdown-item>
                                 <el-dropdown-item>
                                    编辑部门
                                 </el-dropdown-item>
                                 <el-dropdown-item>
                                    删除部门
                                 </el-dropdown-item>
                              </el-dropdown-menu>
                           </el-dropdown>
                        </el-col>
                     </el-row>
                  </el-col>
               </el-row> -->
            </el-tree>
         </el-card>
         <!-- 新增 -->
         <AddDept
            :showDialog.sync="showDialog"
            :treeNode="node"
            @addDepts="getPanes"
            ref="addDept"
         ></AddDept>
      </div>
   </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import { getDepartments } from '../../api/departments'
import { transListToTreeData } from '../../utils'
import AddDept from './components/add-dept.vue'
export default {
   components: {
      TreeTools,
      AddDept
   },
   data() {
      return {
         // 头部内容
         company: {},
         departs: [],
         defaultProps: {
            // 默认值 label
            label: 'name'
         },
         // 默认不显示弹层
         showDialog: false,
         // 记录当前点击的 node 节点
         node: null
      }
   },
   created() {
      this.getPanes()
   },
   methods: {
      // 获取数据
      async getPanes() {
         const result = await getDepartments()
         // console.log(result)
         this.company = {
            name: result.companyName,
            manager: '负责人',
            id: ''
         }
         this.departs = transListToTreeData(result.depts, '')
      },
      // 监听 tree-tools 中触发点击添加部门的事件
      // node 是我们点击的部门
      // 添加数据
      addDepts(node) {
         this.showDialog = true
         this.node = node
      },
      // 编辑数据
      editDepts(node) {
         this.showDialog = true
         // 既可以记录添加子部门节点，也可以记录编辑部门的节点
         // 因为不可能同时点击两个
         this.node = node
         // 通过 ref 获取到它的 this 调用方法
         // console.log(this.$refs.addDept)
         this.$refs.addDept.getDepartDetail(node.id)
      }
   }
}
</script>

<style scoped>
.tree-card {
   padding: 30px 140px;
   font-size: 14px;
}
</style>
